<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Filtering and selection</h2>
    <p>Select your favorite state</p>
    <mat-form-field>
      <mat-label>Search for a state</mat-label>
      <input matInput
             [matAutocomplete]="autocomplete"
             [(ngModel)]="value"
             (ngModelChange)="filteredStates = filter(value)">
      <mat-autocomplete #autocomplete="matAutocomplete">
        <mat-option *ngFor="let state of filteredStates" [value]="state.name">
          <span>{{ state.name }}</span>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

    <p>Selected value: {{ value }}</p>
  </section>
</mat-card>